<template>
    <div id="author_paper" style="width: 100%;height: 100%;"></div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts'
import { onMounted, reactive, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { useMessage } from 'naive-ui';

type EChartsOption = echarts.EChartsOption;

// 引入路由
const router = useRouter()

// 引入消息函数
const message = useMessage()

// api访问代理
const { proxy } = getCurrentInstance() as any

// 获取机构id
const id = router.currentRoute.value.params.id

const option: EChartsOption = reactive({
    title: {
        text: 'Annual Paper'
    },
    legend: {
        right: '0%',
        data: ['Number of papers']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [
        {
            name: 'Number of papers',
            type: 'bar',
            data: []
        }
    ]
})


onMounted(() => {
    initCharts()
})

const initCharts = (() => {
    var chartDom = document.getElementById("author_paper")!;
    var myChart = echarts.init(chartDom);
    myChart.showLoading();

    proxy.$api.entity.getAuthorAnnualPaper({ id: id }).then((result: any) => {
        if (result.success) {
            myChart.hideLoading();
            (option.xAxis as any).data = result.year;
            (option.series as any)[0].data = result.paper;
            option && myChart.setOption(option);
        } else {
            message.warning(result.msg)
        }
    }).catch(() => {
        message.error('未知错误')
    });
})
</script>

<style scoped>
</style>